<template>
    <div class="comment-item">
        <div class="top-info">
            <div class="left-pic">
                <el-avatar :size="50" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
            </div>
            <div class="right-info">
                <p class="name">{{ props.data.userName }}</p>
                <p class="school-time">
                    <span>湖南信息职业技术学院 · </span>
                    <span>{{ props.data.pushTime }}</span>
                </p>
            </div>
        </div>
        <div class="content">
            <div class="left-top"></div>
            <div class="right-text">
                <p>{{ props.data.content }}</p>
            </div>
        </div>
        <div class="footer">
            <div class="reply" @click="isShowReplyInput = true">
                <el-icon :size="18"><EditPen /></el-icon>
                <span>回复</span>
            </div>
            <!-- <div class="star">
        <i style="font-size: 18px" class="iconfont icon-dianzan"></i>
        <p>赞同 <span>0</span></p>
        <div @click="removeStarNews" v-else class="bth cancel">
                    <i style="font-size: 18px" class="iconfont icon-dianzan"></i>
                    <p>取消点赞</p>
                  </div> -->
            <!-- </div> -->
            <div style="margin-top: 10px" class="comment-input" v-if="isShowReplyInput">
                <el-input v-model="commentContent" :rows="4" type="textarea" placeholder="回复他" resize="none" :autofocus="true"></el-input>
            </div>
            <div v-if="isShowReplyInput" class="post">
                <el-button @click="replyComment" type="primary">回复评论</el-button>
            </div>
        </div>
        <div class="reply-list">
            <div class="item" v-for="d in props.data.children">
                <!-- {{d}} -->
                <CommentChildrenItem @replayComment="emit('replayComment')" :data="d" :rootId="props.data.id"></CommentChildrenItem>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { SendCommentParams, commentItem } from "../../types/api/comment";
import { defineProps, defineEmits, ref } from "vue";
import { useRoute } from "vue-router";
import useUserStore from "@/stores/user";
import { sendCommentAPI } from "@/api/comment";
import { ElMessage } from "element-plus";
import CommentChildrenItem from "./CommentChildrenItem.vue";

const emit = defineEmits(["replayComment"]);
const userStore = useUserStore();
const route = useRoute();
const isShowReplyInput = ref(false);
const commentContent = ref("");
async function replyComment(d: {}) {
    let { contestId, activityId, type } = route.query;
    activityId = activityId as string;
    contestId = contestId as string;
    type = type as string;
    if (d instanceof Event) {
        const data: SendCommentParams = {
            activityId: contestId,
            content: commentContent.value,
            type: props.data.type,
            userName: userStore.userInfo.data.nickName,
            toCommentId: props.data.id,
            toCommentUserId: props.data.userId,
            rootId: props.data.id,
        };
        const res = await sendCommentAPI(data);
        if (res.data.code === 200) {
            ElMessage({
                message: "回复成功",
                type: "success",
            });
            isShowReplyInput.value = false;
            emit("replayComment");
            commentContent.value = "";
        }
    } else {
        console.log(d);
    }
}

const props = defineProps<{
    data: commentItem;
}>();
console.log(props.data);
</script>

<style lang="scss" scoped>
.comment-item {
    padding: 20px;
    font-size: 12px;
    border-bottom: 1px solid #e6e6e6;
    .top-info {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .right-info {
            margin-left: 10px;
            .name {
                color: #333;
                font-size: 14px;
            }
            .school-time {
                color: #666;
            }
        }
    }
    .content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .left-top {
            width: 60px;
            height: 30px;
        }
        .right-text {
            font-size: 14px;
        }
    }
    .footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 55px;
        margin-top: 10px;
        flex-wrap: wrap;
        > div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #666;
            cursor: pointer;
            &:hover {
                color: $main-color;
            }
            > :last-child {
                margin-left: 5px;
            }
        }
        .comment-input {
            width: 100%;
        }
        .post {
            margin-left: auto;
            margin-top: 20px;
        }
    }
    .reply-list {
        margin-left: 50px;
        margin-top: 20px;
        border-left: 3px solid #e6e6e6;
    }
}
</style>
